<template>
  <!-- 分类管理 -->
  <div>
    <div class="min">
      <div>
        <el-button type="primary"><i class="el-icon-plus"></i>新增</el-button>
      </div>
      <div>
        <el-table
          :data="lis"
          style="width: 100%; margin-bottom: 20px"
          row-key="categoryId"
          border
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="categoryName" label="分类名称" width="150">
          </el-table-column>
          <el-table-column prop="pic" label="图片" width="271">
            <template #scope="scope">
              <div class="name-wrapper">
                <img :src="scope.row.pic" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="271">
            <template #scope="scope">
              <div class="name-wrapper">
                <el-tag size="medium">{{
                  scope.row.status == 0
                    ? "下线"
                    : scope.row.status == 1
                    ? "正常"
                    : scope.row.gender
                }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="seq" label="排序号" width="271">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/lxl";
export default {
  data() {
    return {
      lis: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const params = {
        t: 1742456734141,
      };
      getList(params)
        .then((res) => {
          console.log(res);
          const data = res.data.data;
          this.tableData = this.buildTree(data);
          this.options = this.buildTree(data);
        })
        .catch((error) => {
          console.error("获取数据失败:", error);
        });
    },

    // 构建树形结构
    buildTree(data) {
      const map = {};
      const roots = [];

      // 首先将所有节点存储到 map 中
      data.forEach((item) => {
        map[item.categoryId] = { ...item }; // 先不初始化 children
      });

      // 遍历数据，将子节点放入对应的父节点中
      data.forEach((item) => {
        if (item.parentId !== 0) {
          // 如果父节点不存在 children，则初始化
          if (!map[item.parentId].children) {
            map[item.parentId].children = [];
          }
          map[item.parentId].children.push(map[item.categoryId]);
        } else {
          roots.push(map[item.categoryId]);
        }
      });

      // 移除没有子节点的 children 属性
      const removeEmptyChildren = (node) => {
        if (node.children && node.children.length === 0) {
          delete node.children; // 移除空的 children 属性
        } else if (node.children) {
          node.children.forEach(removeEmptyChildren); // 递归处理子节点
        }
      };

      roots.forEach(removeEmptyChildren); // 处理根节点
      return roots;
    },

    handleEdit(index, row) {
      console.log("编辑操作:", index, row);
    },
    handleDelete(index, row) {
      console.log("删除操作:", index, row);
    },
  },
};
</script>

<style>
.min {
  padding: 20px;
}
</style>    